<template>
  <div>
    <h3>这个是Father组件---sync---{{ num }}---{{ num2 }}</h3>
    <!-- <Son :value="num" @input="(val) => num = val"> -->
    <!-- v-model: 表单数据的双向绑定, 也可以绑定在数组上, 进行数据的双向修改 -->
    <!-- v-model是一个语法糖的写法相当于 <Son :value="num" @input="(val) => num = val">
        注意: v-model在同一个组件身上只能绑定一次
    -->
    <!-- <Son v-model="num" /> -->

    <!-- <Son :a="num" :b="num2" @update:a="val => num = val" @update:b="val => num2 = val" /> -->
    <!-- :变量名.sync = "传入的值" 作用是可以在组件上实现双向绑定, 可以传多次
      这个也是语法糖的写法. 等同于
      <Son :a="num" :b="num2" @update:a="val => num = val" @update:b="val => num2 = val" />
    -->
    <Son :a.sync="num" :b.sync="num2" />
  </div>

</template>
<script>
import Son from './Son.vue'
export default {
  components: {
    Son
  },
  data() {
    return {
      num: 100,
      num2: 200
    }
  },
  methods: {
    hClick() {
      alert('ok')
    }
  }
}

</script>
